<template>
  <!-- 门店取消 -->
  <page-form-row>
    <page-form-item
      size="1"
      label="是否启用门店取消规则"
      :style="{ marginBottom: form[configTypePropStr].isEnableSiteCancel ? '3px' : '10px' }"
    >
      <template #label="{ label }">
        <span class="font-bold">{{ label }}</span>
      </template>
      <a-radio-group v-model="form[configTypePropStr].isEnableSiteCancel" @change="isCancelRuleChangeFn">
        <a-radio v-for="item in dict.enableSiteCancelMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
    <!-- 下单取消时间-->
    <div class="page-form-block" style="background: none" v-if="form[configTypePropStr].isEnableSiteCancel == 1">
      <page-form-item class="item-rule-wrap" style="margin-bottom: 0" size="1">
        <div class="item-rule-text">下单后</div>
        <page-form-item
          :style="{
            marginBottom: 0,
          }"
          :field="`${configTypePropStr}.cancelUnpaidAutoTime`"
          :rules="{ message: '请输入时间', required: true }"
        >
          <i-input-number
            class="ml-1 mr-1"
            v-model="form[configTypePropStr].cancelUnpaidAutoTime"
            unit="分钟"
            :min="1"
            :max="60"
            :defaultValue="15"
            :style="{ width: '163px' }"
          />
        </page-form-item>
        <div class="item-rule-text" :style="{ 'margin-left': '5px', 'margin-right': '50px' }">未支付自动取消</div>

        <div class="item-rule-text">支付后</div>
        <page-form-item
          :style="{
            marginBottom: 0,
          }"
          :field="`${configTypePropStr}.cancelPaidFreeTime`"
          :rules="{ message: '请输入时间', required: true }"
        >
          <i-input-number
            class="ml-1 mr-1"
            v-model="form[configTypePropStr].cancelPaidFreeTime"
            unit="分钟"
            :min="1"
            :max="60"
            :defaultValue="30"
            :style="{ width: '163px' }"
          />
        </page-form-item>
        <div class="item-rule-text" :style="{ 'margin-left': '5px' }">内可免费取消</div>
      </page-form-item>
    </div>
    <div class="page-form-block" v-if="form[configTypePropStr].isEnableSiteCancel == 1">
      <!-- 平日取消规则 -->
      <div class="date-cancel">
        <h3>平日取消规则</h3>
        <a-alert
          ><template #icon> <icon-exclamation-circle /> </template>超过取车时间,默认收取订单已结算总金额的100%作为违约金</a-alert
        >
      </div>
      <page-form-item label="取车前是否支持无责取消" class="item-rule-wrap" style="margin-bottom: 0" size="1">
        <a-radio-group v-model="form[configTypePropStr].cancelWeekdayBeforeRule" @change="isCancelWeekdayBeforeRuleChangeFn">
          <a-radio v-for="item in dict.cancelWeekdayBeforeRuleMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>

      <div
        style="margin: 20px 0"
        v-if="
          form[configTypePropStr].cancelWeekdayBeforeRule == 0 &&
          form[configTypePropStr].cancelWeekdayItemList &&
          form[configTypePropStr].cancelWeekdayItemList.length > 0
        "
      >
        <page-form-item
          style="margin: 10px 0"
          size="1"
          class="item-rule-wrap"
          v-for="(item, index) in form[configTypePropStr].cancelWeekdayItemList"
          :key="index"
        >
          <div class="item-rule-text">取车前</div>
          <page-form-item
            :style="{
              marginBottom: 0,
            }"
          >
            <template v-if="index > 0">
              <i-input-number
                disabled
                class="ml-1 mr-1"
                v-model="item.minHour"
                :unit="configTypePropStr == 'longSiteConfig' ? '天' : '小时'"
                :min="1"
                :max="999"
                :precision="0"
                :style="{ width: '163px' }"
              />
              <div class="item-rule-text">至</div>
            </template>
          </page-form-item>

          <page-form-item
            style="margin-bottom: 0"
            :field="`${configTypePropStr}.cancelWeekdayItemList.${index}.maxHour`"
            :rules="{ message: '请输入时间', required: true }"
          >
            <i-input-number
              class="ml-1 mr-1"
              v-model="item.maxHour"
              :unit="configTypePropStr == 'longSiteConfig' ? '天' : '小时'"
              :min="inputMinFn(index)"
              :max="inputmaxFn(index)"
              :disabled="inputMinFn(index) > inputmaxFn(index)"
              :error="inputMinFn(index) > inputmaxFn(index)"
              @change="chnangeEndTimeFn(index)"
              :precision="0"
              :style="{ width: '163px' }"
            />
          </page-form-item>
          <div class="item-rule-text" :style="{ 'margin-left': '5px' }">内取消，收取订单已结算总金额的</div>
          <page-form-item
            :style="{
              marginBottom: 0,
            }"
            :field="`${configTypePropStr}.cancelWeekdayItemList.${index}.rate`"
            :rules="{ message: '请输入百分比数值', required: true }"
          >
            <i-input-number class="ml-1" unit="%" :min="1" :max="100" v-model="item.rate" :style="{ width: '163px' }" />
            <div class="item-rule-text" :style="{ 'margin-left': '5px' }">作为违约金</div>
          </page-form-item>
          <operate-list
            :isDisabled="item.minHour == 999 || item.maxHour == 999"
            style="position: relative; left: 0"
            :index="index"
            :onlyLastShowDelete="true"
            :length="form[configTypePropStr].cancelWeekdayItemList.length"
            @add="addCancelDate"
            @delete="deleteCancelDate(index)"
          />
          <!-- <section style="display: flex; margin-left: 20px">
            <div class="add-icon date-icon" @click="addCancelDate()">
              <img src="../../imgs/add-icon.png" />
              <p>添加时段</p>
            </div>
            <div
              class="del-icon date-icon"
              @click="deleteCancelDate(index)"
              v-if="index !== 0 && index == form[configTypePropStr].cancelWeekdayItemList.length - 1"
            >
              <img src="../../imgs/del-icon.png" />
              <p>删除</p>
            </div>
          </section> -->
        </page-form-item>
      </div>
    </div>
  </page-form-row>
</template>

<script setup name="ServiceCancelConfig">
  import { ref, inject } from 'vue'
  import operateList from './operte-list.vue'
  const props = defineProps({
    configTypePropStr: String,
  })
  // 接收父组件
  const form = inject('form')
  const dict = inject('dict')
  // 是否启用门店取消
  const isCancelRuleChangeFn = (value) => {
    if (value == 1) {
      let isCancelRule = form.value[props.configTypePropStr].cancelWeekdayBeforeRule
      isCancelWeekdayBeforeRuleChangeFn(isCancelRule)
    }
  }
  // 取车前是否支持无责取消切换事件
  const isCancelWeekdayBeforeRuleChangeFn = (value) => {
    if (value == 0) {
      let rules = form.value[props.configTypePropStr].cancelWeekdayItemList
      if (!rules || rules.length == 0) {
        // 默认值
        form.value[props.configTypePropStr].cancelWeekdayItemList = [
          {
            minHour: 0,
            maxHour: '',
            rate: '',
          },
        ]
      }
    }
  }
  const addCancelDate = () => {
    const rules = form.value[props.configTypePropStr].cancelWeekdayItemList
    const last = rules[rules.length - 1]
    const newRule = {
      minHour: '',
      maxHour: '',
      rate: '',
    }
    if (last.maxHour) {
      newRule.minHour = last.maxHour
      newRule.maxHour = newRule.minHour * 2 <= 999 ? newRule.minHour * 2 : 999
    }
    form.value[props.configTypePropStr].cancelWeekdayItemList.push(newRule)
  }
  const deleteCancelDate = (index) => {
    const rules = form.value[props.configTypePropStr].cancelWeekdayItemList
    rules.splice(index, 1)
  }
  // 更改单条结束时间
  const chnangeEndTimeFn = (index) => {
    const rules = form.value[props.configTypePropStr].cancelWeekdayItemList
    const item = rules[index]
    const next = rules[index + 1]
    if (next) {
      next.minHour = item.maxHour
    }
  }
  const inputMinFn = (index) => {
    if (index == 0) {
      return 0
    }
    const rules = form.value[props.configTypePropStr].cancelWeekdayItemList
    let min = 0
    while (index > 0 && !min) {
      let prev = rules[index - 1]
      if (prev?.maxHour) {
        min = prev.maxHour + 1
      }
      index--
    }
    if (min <= 1) min = 1
    return min
  }
  const inputmaxFn = (index) => {
    const rules = form.value[props.configTypePropStr].cancelWeekdayItemList
    let max = undefined
    while (index < rules.length && !max) {
      let next = rules[index + 1]
      if (next?.maxHour) {
        max = next.maxHour - 1
      }
      index++
    }
    if (max >= 999 || max === undefined) max = 999
    return max
  }
</script>

<style lang="less" scoped>
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px;
    width: 100%;
  }
  .date-cancel {
    padding: 0 70px;
    margin-bottom: 10px;
    h3 {
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .item-rule-wrap {
    .item-rule-text {
      line-height: 32px;
      margin-right: 5px;
    }
    :deep(.arco-form-item-content-flex) {
      align-items: flex-start;
    }
  }
  .date-icon {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer;
    img {
      margin-right: 8px;
      width: 16px;
      height: 16px;
    }
  }
  .del-icon {
    color: #ea0000;
  }
  .add-icon {
    color: #165dff;
  }
</style>
